<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>第一章作业</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	.box1,.box2{
		width:500px;
		height:200px;
		
		border:1px solid red;
	}
	section{
		width: 502px;
		height:410px;
		margin:auto;
		overflow: hidden;
	}
</style>
</head>
<body>
	<section onmouseout="mouseObject.default(this)">
		<div class="box1" onmouseover="mouseObject.mOver(this)" onmouseout="mouseObject.mOut(this)">div1</div>
    	<div class="box2" onmouseover="mouseObject.mOver(this)" onmouseout="mouseObject.mOut(this)">div2</div>	
	</div>
   
    <script>
    	var mouseObject = function(){};
    	// 颜色属性
    	mouseObject.defColor =  "#FFF";
    	mouseObject.ChangeColor = "#CCC";

    	//鼠标移入事件
    	mouseObject.mOver = function(obj){
    		mouseObject.change(mouseObject.ChangeColor);
    		obj.style.background = mouseObject.defColor;
    	}
    	//鼠标移出事件
    	mouseObject.mOut = function(obj){
    		mouseObject.change(mouseObject.ChangeColor);
    		obj.style.background = mouseObject.defColor;
    	}
    	//全部移除以后
    	mouseObject.default = function(){
    		mouseObject.change(mouseObject.defColor);
    	}

    	//改变的方法
    	mouseObject.change = function(color){
    		var box = document.getElementsByTagName("div");
    		for (var i = 0; i < box.length; i++) {
    			box[i].style.background = color;		
	   		}
	    }

    </script>
</body>
</html>